﻿<html>
<head>
    <meta http-equiv="Content-Type" charset=utf-8" />
    <title>Interpreter</title>
    <style>
        .div-a{ float:left;width:49%;border:1px solid #F00}
        .div-b{ float:left;width:49%;border:1px solid #000}
        .div-c{ float:left;width:49%} /*没有边框*/
    </style>
    <script>
        function onBtnParse()
        {
            document.getElementById("textState").value = "45";
        }
    </script>
</head>
<body>
<!--<div class="div-a">第一个DIV盒子</div>-->
<!--<div class="div-b">第二个DIV盒子</div>-->
<!--<form name="form_a" method="GET" action="udp.php">-->
<!--<form>-->
<!--<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>-->

    <div class="div-c">
        Content:<br/>
        <textarea rows="30" cols="80" id="textContent" style="resize:none"></textarea><br/>
    </div>
    <div class="div-c">
        Expression:<br/>
        <textarea rows="30" cols="80" id="textExpression" style="resize:none"></textarea><br/>
    </div>
    State:<br/>
    <textarea readonly="readonly" id="textState" rows="2" cols="30" name="state" style="resize:none"></textarea><br/>
    <button onclick="loadXMLDoc()">Parse</button>
<!--    <a href="http://www.w3school.com.cn">W3School</a>-->
<!--    <input name="parse" type="submit" value="Parse">-->
<!--</form>-->
<script language="javascript">
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
//                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                document.getElementById('textState').value = xmlhttp.responseText;
            }
        }
//        发送POST请求通常需要如下的三个步骤：
//    1)    使用open方法打开连接时，指定使用POST方式发送请求。
//    2)    设置正确的请求头，POST请求通常应设置Content-Type请求头
//    3)    发送请求，把请求参数转换为查询字符串，将字符串作为send()方法请求参数。
        xmlhttp.open("POST","udp.php",true);
        // 设置POST请求的请求头
        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        //get content and expression
//        xmlhttp.send();
        var postMessage = ""
        postMessage += "textContent=";
        postMessage += document.getElementById('textContent').value;
        postMessage += "&";
        postMessage += "textExpression=";
        postMessage += document.getElementById('textExpression').value;
//        xmlhttp.send("textContent=Henry&textExpression=Ford");
        //alert(postMessage);
        xmlhttp.send(postMessage);
    }

    function onParse() {
//        if (!isValidFields())
//            return false;
        document.getElementById("textState").value = "2";
//        return false;
    }

</script>
</body>
</html>
